<template>
  <div class="newHome">
    <el-header class="title">
      <p>热带亚热带特色植物库</p>
    </el-header>
    <el-main class="main-outer">
      <div id="mapContainer"></div>
    </el-main>
    <el-dialog v-model="dialogTableVisible" title="植物分布">
      <div class="container" @click="linkTo">
        <div
          class="list"
          v-for="(item, i) in pointList[curId].imgAddr"
          :key="i"
        >
          <el-image :src="item.addr" class="img" fit="cover"></el-image>
          <div>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <span
          class="dialog-footer"
          style="display: flex; flex-direction: row-reverse"
        >
          <el-pagination
            layout="prev, pager, next"
            :total="50"
            style="width: 30%"
          />
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pointList: [
        {
          id: 1,
          title: "address1",
          local: [113.050818, 24.912506],
          imgAddr: [
            {
              title: "植物1",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物2",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物3",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物4",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物5",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物6",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物7",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },

          ]

        },
        {
          id: 2,
          title: "address2",
          local: [113.885224, 23.640932],
          imgAddr: [{
            title: "植物1",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物2",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物3",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物4",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物5",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物6",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },]
        },
        {
          id: 3,
          title: "address3",
          local: [117.651005, 26.339452],
          imgAddr: [
            {
              title: "植物1",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物2",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物3",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物4",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
            {
              title: "植物5",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
          ]
        },
        {
          id: 4,
          title: "address4",
          local: [120.166667, 30.266667],
          imgAddr: [{
            title: "植物1",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物2",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物3",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物4",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },]
        },
        {
          id: 5,
          title: "address5",
          local: [123.166667, 35.266667],
          imgAddr: [{
            title: "植物1",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物2",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物3",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },]
        },
        {
          id: 6,
          title: "address6",
          local: [126.166667, 27.266667],
          imgAddr: [{
            title: "植物1",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },
          {
            title: "植物2",
            addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
          },]
        },
        {
          id: 7,
          title: "address7",
          local: [115.166667, 30.266667],
          imgAddr: [
            {
              title: "植物1",
              addr: "http://img2.iplant.cn/gotoimg/236/04B2B67853C153B8.jpg",
            },
          ]
        },
      ],
      map: null,
      dialogTableVisible: false,
      curId: null
    }
  },
  mounted () {
    this.initMap();
  },
  methods: {
    initMap () {
      let self = this;
      this.map = new window.AMap.Map('mapContainer', {
        resizeEnable: true,
        center: [113.050818, 24.912506],
        zoom: 6,//级别
        mapStyle: "amap://styles/fresh",
      });//初始化地图
      for (var i = 0; i < this.pointList.length; i++) {
        let id = i;
        const marker = new window.AMap.Marker({
          position: this.pointList[i].local, //不同标记点的经纬度
          map: self.map,
          icon: '',
        });
        marker.on("click", () => { self.markerClick(id) });
      }
    },
    markerClick (e) {
      this.dialogTableVisible = true;
      this.curId = e;
    },
    linkTo () {
      this.$router.push({
        path: "/about",
        query: {
          name: "荔枝",
        },
      });
    }
  }
}
</script>
<style scoped>
.newHome {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: rgb(242, 242, 242);
}
.mainBtn {
  display: inline-block;
}

.title {
  height: 10%;
  font-size: 40px;
  font-weight: bold;
  background: #56ab2f; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #a8e063,
    #56ab2f
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #a8e063,
    #56ab2f
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.title p {
  display: inline-block;
  margin: 0px;
  margin-left: 20px;
  padding: 9px 0px 40px 0px;
  color: white;
}
.main-outer {
  height: 88%;
  padding: 20px;
}
.header {
  width: 100%;
  height: 8%;
  margin: 0;
  padding: 0;
  box-shadow: 5px 5px 20px hsla(0, 0%, 86.7%, 0.5);
}
#mapContainer {
  width: 100%;
  height: 100%;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.list {
  width: 19%;
  height: 120px;
  margin-top: 15px;
  text-align: center;
}
.list:not(:nth-child(5n)) {
  margin-right: calc(5% / 4);
}
.img {
  width: 100px;
  height: 100px;
  display: inline-block;
}
</style>
